<template>
  <div>

    <div class="search-top" style="margin-top: 5px;margin-left: 25%">
      <el-card class="box-card">
        <el-row :gutter="10">
        <el-form
          ref="queryForm"
          :model="queryParams"
          size="small"
          label-width="100px"
        >
          <el-col :span="5">
          <el-form-item label="订单号" prop="searchContent">
            <el-input
              v-model="queryParams.searchContent"
              placeholder="请输入订单号"
              clearable
              @clear="handleClear"
            >
            </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleSearch"
          >搜索</el-button>
          </el-col>
        </el-form>
        </el-row>
      </el-card>

    </div>

    <div class="content" v-if="activeTableTab">
      <div class="step-simple" style="margin-left: -10%">
        <el-steps :space="300" :active="activeStep" finish-status="success">
          <el-step :title="item.name" :key="index" v-for="(item ,index) in statusList"></el-step>
        </el-steps>
      </div>

      <div style="margin-top: 20px;" class="order-detail">
                      <div  class="flex-container">
                        <div  class="flex-item">
                          <div class="item-left">订单:</div>
                          <div>{{ orderDetail.content }}</div>
                        </div>
                        <div  class="flex-item">
                          <div class="item-left">合同编号:</div>
                          <div>{{ orderDetail.customStr }}</div>
                        </div>
                        <div  class="flex-item">
                          <div class="item-left">创建时间:</div>
                          <div>{{ orderDetail.created }}</div>
                        </div>

                        <div  class="flex-item">
                          <div class="item-left">时间:</div>
                          <div>{{ orderDetail.taskDateRange }}</div>
                        </div>
                        <div class="flex-item">
                          <div class="item-left">更新时间:</div><div>{{orderDetail.updated}}</div>
                        </div>
                        <div class="flex-item">
                          <div class="item-left">备  注:</div><div class="item-right">{{orderDetail.note}}</div>
                        </div>
                      </div>

      </div>

      <div class="step-act" style="margin-top: 20px">
        <el-steps direction="vertical" :active="activeStep" process-status="success">
          <el-step :title="item.name" :key="index" v-for="(item ,index) in statusList">
            <template slot="description">
              <div v-if="getActive(item.id)">
                <div class="flex-container">
                  <div class="flex-item">
                    <div>{{ getStepTime(item.id) }}</div>
                  </div>
                </div>
              </div>
              <!--            <div v-if="activeStep === item.index">-->
              <!--              <div  class="flex-container">-->
              <!--                <div  class="flex-item">-->
              <!--                  <div class="item-left">订单:</div>-->
              <!--                  <div>{{ orderDetail.content }}</div>-->
              <!--                </div>-->
              <!--                <div  class="flex-item">-->
              <!--                  <div class="item-left">创建时间:</div>-->
              <!--                  <div>{{ orderDetail.created }}</div>-->
              <!--                </div>-->

              <!--                <div  class="flex-item">-->
              <!--                  <div class="item-left">时间:</div>-->
              <!--                  <div>{{ orderDetail.taskDateRange }}</div>-->
              <!--                </div>-->
              <!--                <div class="flex-item">-->
              <!--                  <div class="item-left">更新时间:</div><div>{{orderDetail.updated}}</div>-->
              <!--                </div>-->
              <!--                <div class="flex-item">-->
              <!--                  <div class="item-left">备  注:</div><div class="item-right">{{orderDetail.note}}</div>-->
              <!--                </div>-->


              <!--              </div>-->
              <!--              <el-row :gutter="2">-->
              <!--                <el-form>-->
              <!--                  <el-col :span="6">-->
              <!--                    <el-form-item label="订单">-->
              <!--                      <el-input-->
              <!--                        v-model="orderDetail.content"-->
              <!--                        clearable-->
              <!--                        disabled-->
              <!--                        :style="{ width: '100%' }"/>-->
              <!--                    </el-form-item>-->
              <!--                  </el-col>-->
              <!--                  <el-col :span="4">-->
              <!--                    <el-form-item label="创建时间">-->
              <!--                      <el-input-->
              <!--                        v-model="orderDetail.created"-->
              <!--                        clearable-->
              <!--                        disabled-->
              <!--                        :style="{ width: '100%' }"/>-->
              <!--                    </el-form-item>-->
              <!--                  </el-col>-->
              <!--                  <el-col :span="6">-->
              <!--                    <el-form-item label="时间">-->
              <!--                      <el-input-->
              <!--                        v-model="orderDetail.taskDateRange"-->
              <!--                        clearable-->
              <!--                        disabled-->
              <!--                        :style="{ width: '100%' }"/>-->
              <!--                    </el-form-item>-->
              <!--                  </el-col>-->
              <!--                  <el-col :span="4">-->
              <!--                    <el-form-item label="更新时间">-->
              <!--                      <el-input-->
              <!--                        v-model="orderDetail.updated"-->
              <!--                        clearable-->
              <!--                        disabled-->
              <!--                        :style="{ width: '100%' }"/>-->
              <!--                    </el-form-item>-->
              <!--                  </el-col>-->
              <!--                  <el-col :span="5">-->
              <!--                    <el-form-item label="备注">-->
              <!--                      <el-input-->
              <!--                        type="textarea"-->
              <!--                        v-model="orderDetail.note"-->
              <!--                        disabled-->
              <!--                        :style="{ width: '100%' }"/>-->
              <!--                    </el-form-item>-->
              <!--                  </el-col>-->

              <!--                </el-form>-->
              <!--              </el-row>-->
              <!--            </div>-->
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import {getTaskStatus, searchOrder} from "@/api/project/order";

export default {
  data() {
    return {

      getActive(id) {
        return this.orderDetail.actList.some(item => item.tfsId === id);
      },
      getStepTime(id) {
        const actItem = this.orderDetail.actList.find(item => item.tfsId === id);
        if (actItem) {
          return actItem.updateTime;
        } else {
          return '';
        }
      },
      orderDetail: {},
      activeStep: 0,
      activeTableTab: false,
      statusList: [],
      searchData: {},
      queryParams: {
        searchContent: ''
      },
      formOption: {
        emptyBtn: false,
        menuPosition: 'left',
        submitBtn: true,
        clearBtn: true,
        column: [
          {
            label: '订单号',
            prop: 'searchContent',
            span: 8,
            rules: [{
              required: true,
              message: "请输入订单号",
              trigger: "blur"
            }]
          }
        ]
      }
    };
  },
  created() {
    this.taskSteps();
  },

  methods: {
    checkStatus(stepId) {
      for (let i = 0; i < this.statusList.length; i++) {
        var statusItem = this.statusList[i];
        if (statusItem.id === stepId) {
          this.activeStep = i;
          break
        }
      }
    },
    taskSteps() {
      getTaskStatus().then(res => {
        console.log("zzzzzz", res.data.data);
        this.statusList = res.data.data;
        for (let i = 0; i < this.statusList.length; i++) {
          this.statusList[i].index = i;
        }
      })


    },

    handleClear() {
      this.activeTableTab = false;
    },
    handleSearch() {
      searchOrder(this.queryParams).then(res => {
        this.orderDetail = res.data.data;
        console.log("hhhhh", this.orderDetail)
        if (this.orderDetail.id) {
          this.activeTableTab = true;
          this.checkStatus(this.orderDetail.tfsId);
        } else {
          this.activeTableTab = false;
        }
      })
    },
  }
};
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: black;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  color: black;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-item {
  /* 可选样式 */
  padding: 8px;
  width: 700px;
  color: #000c17;
  font-size: small;
  display: flex;
}

.item-left {
  width: 15%;
}

.item-right {
  width: 80%;
}

.content {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
  height: 80vh; /* 容器高度设置为视口高度 */
  overflow-y: auto;
}
</style>
